<template>
    <div class="norm-form">
        <el-form ref="FormRef" :model="state.form" :rules="rules" label-width="auto" status-icon>
            <el-form-item label="名称" prop="user.name">
                <el-input v-model="state.form.user.name" clearable />
            </el-form-item>
            <el-form-item label="部门" prop="user.deptName">
                <el-input v-model="state.form.user.deptName" disabled>
                    <template #append> <el-button @click="showDeptDialog">选择</el-button></template>
                </el-input>
            </el-form-item>
            <el-form-item label="账号" prop="account">
                <el-input v-model="state.form.account" clearable />
            </el-form-item>
            <el-form-item label="角色" prop="user.roleNames">
                <el-input v-model="state.form.user.roleNames" disabled>
                    <template #append> <el-button @click="showRoleDialog">选择</el-button></template>
                </el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="state.form.phone" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">
                    保存
                </el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>

    <el-dialog v-model="deptDialogVisible" title="选择部门" width="500" :before-close="handleClose">
        <DeptTreeSelector :select-last="false" @cancel="deptCancel" @sure="deptCheck" />
    </el-dialog>
    <el-dialog v-model="roleDialogVisible" title="选择角色" width="800" :before-close="handleClose">
        <RoleSelector @cancel="roleCancel" @sure="roleCheck" />
    </el-dialog>
</template>
<script setup>
import { reactive, ref } from 'vue'
import DeptTreeSelector from '@/views/system/dept/components/DeptTreeSelector.vue'
import RoleSelector from '@/views/system/role/components/RoleSelector.vue'
import { ElNotification } from 'element-plus'
import { add } from '@/api/system/admin'
import { useRouter } from 'vue-router'

const router = useRouter()
const deptDialogVisible = ref(false)
const roleDialogVisible = ref(false)
const FormRef = ref(undefined)

const state = reactive({
    form: {
        account: undefined,
        phone: undefined,
        user: {
            name: undefined,
            deptId: undefined,
            deptName: undefined,
            roleIds: [],
            roleNames: undefined,
        }
    },

})


const rules = reactive({
    'user.name': [
        { required: true, message: '名称必填', trigger: 'blur' },
        { min: 2, max: 50, message: '名称为2-50个字符', trigger: 'blur' },
    ],
    'user.deptName': [
        { required: true, message: '部门必填', trigger: 'blur' },
    ],
    account: [
        { required: true, message: '账号必填', trigger: 'blur' },
        { min: 2, max: 20, message: '账号为2-20个字符', trigger: 'blur' },
    ],
    'user.roleNames': [
        { required: true, message: '部门必填', trigger: 'blur' },
    ],
    phone: [
        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
    ]
})

const submitForm = async (formEl) => {
    if (!FormRef.value) return
    await FormRef.value.validate((valid, fields) => {
        if (valid) {
            add(state.form).then(data => {
                ElNotification({
                    title: '操作成功',
                    message: '管理员新增成功',
                    type: 'success',
                })
                router.push('/admin-list')
            })
        }
    })
}


const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))

const showDeptDialog = () => {
    deptDialogVisible.value = true
}
const showRoleDialog = () => {
    roleDialogVisible.value = true
}

const deptCheck = (item) => {
    state.form.user.deptId = item.id
    state.form.user.deptName = item.label
    deptDialogVisible.value = false
    FormRef.value.validateField('user.deptName')
}
const deptCancel = () => {
    deptDialogVisible.value = false
}
const roleCheck = (rows) => {
    if (!rows || rows.length == 0) {
        state.form.user.roleIds = []
        state.form.user.roleNames = undefined
    } else {
        state.form.user.roleIds = rows.map(e => e.id)
        state.form.user.roleNames = rows.map(e => e.name).join(',')
    }
    roleDialogVisible.value = false
    FormRef.value.validateField('user.roleNames')
}
const roleCancel = () => {
    roleDialogVisible.value = false
}

const cancel = () => {
    router.push('/admin-list')
}

</script>
<style scoped lang="scss"></style>
